<template>
  <div class="order">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-tabs v-model="activeName">
            <el-tab-pane label="直播下单流程" name="first">
              <div
                class="hidden-sm-and-down"
                style="width: 98%;text-align: center;margin-left: 1%"
              >
                <img src="../../assets/liucheng1.jpg" style="width: 100%;" />
              </div>

              <div class="box hidden-sm-and-up">
                <div class="yi">
                  <div class="bianhao">1</div>
                  <div class="wenziyi">进入你的抖音设置</div>
                  <img
                    src="../../assets/1.png"
                    style="width: 85%;height: 85%;margin: 20px;"
                  />
                </div>
                <div class="er">
                  <div class="bianhao">2</div>
                  <div class="wenzier">选择你的二维码打开</div>
                  <img
                    src="../../assets/2.png"
                    style="width: 85%;height: 85%;margin: 20px;"
                  />
                </div>
                <div class="san">
                  <div class="bianhao">3</div>
                  <div class="wenzisan">复制你的二维码链接</div>
                  <img
                    src="../../assets/3.png"
                    style="width: 85%;height: 85%;margin: 20px;"
                  />
                </div>
                <div class="si">
                  <div class="bianhao">4</div>
                  <div class="wenzisi">粘贴你的二维码链接</div>
                  <img
                    src="../../assets/4.png"
                    style="width: 85%;height: 85%;margin: 20px;"
                  />
                </div>
                <div class="wu">
                  <div class="bianhao">5</div>
                  <div class="wenziwu">找到业务进行下单</div>
                  <img
                    src="../../assets/5.png"
                    style="width: 85%;height: 85%;margin: 20px;"
                  />
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="视频下单流程" name="second">
              <div
                class="hidden-sm-and-down"
                style="width: 98%;text-align: center;margin-left: 1%"
              >
                <img src="../../assets/liucheng2.jpg" style="width: 100%;" />
              </div>

              <div class="box hidden-sm-and-up">
                <div class="yi">
                  <div class="bianhao">1</div>
                  <div class="wenziyi">复制你的视频连接</div>
                  <img
                    src="../../assets/21.png"
                    style="width: 85%;height: 85%;margin: 20px;"
                  />
                </div>
                <div class="er">
                  <div class="bianhao">2</div>
                  <div class="wenzierer">找到对应的业务</div>
                  <img
                    src="../../assets/22.png"
                    style="width: 85%;height: 85%;margin: 20px;"
                  />
                </div>
                <div class="san">
                  <div class="bianhao">3</div>
                  <div class="wenzisansan">粘贴你的链接</div>
                  <img
                    src="../../assets/23.png"
                    style="width: 85%;height: 85%;margin: 20px;"
                  />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first"
    };
  }
};
</script>

<style scoped lang="stylus">
@import '/Flow.css'
</style>
